<template>
  <div class="container" style="width: 100%; height: 100%; background: #f3f3f3">
    <van-nav-bar
      :title="title"
      fixed
      class="titleStyle"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="searchDiv">
      <van-cell-group style="margin-bottom: 5px">
        <van-field
          v-model="search.carryCheckNo"
          label="送检单号"
          placeholder="请扫描送检单号"
          right-icon="scan"
          @click-right-icon="scan"
          @keyup.enter.native="getListInfo(1)"
        />
        <van-field
          readonly
          is-link
          v-model="search.carryCheckTime"
          label="送检时间"
          placeholder="请选择送检时间"
          @click="showTime = true"
        />
      </van-cell-group>
    </div>
    <!-- 首检列表-->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="已全部加载完成"
        class="van-clearfix"
        :immediate-check="false"
        @load="onLoad"
      >
        <div class="contentBox">
          <div v-for="item in list" :key="item.purchaseId" class="listDiv">
            <van-row style="width: 100%; height: 100%">
              <div class="checkList">
                <h1>
                  <span
                    >{{ item.materialName
                    }}{{
                      item.materialCode !== ""
                        ? "【" + item.materialCode + "】"
                        : ""
                    }}</span
                  >
                </h1>
                <ul>
                  <li>
                    <b>送检单号：</b>
                    <span>{{ item.carryCheckNo }}</span>
                  </li>
                  <li>
                    <b>送检时间：</b>
                    <span>{{ item.carryCheckAt }}</span>
                  </li>
                  <li>
                    <b>工单批次号：</b>
                    <span>{{ item.planBatchNo }}</span>
                  </li>
                  <li>
                    <b>产线：</b>
                    <span>{{ item.proLineName }}</span>
                  </li>
                  <li>
                    <b>工序：</b>
                    <span>{{ item.procedureName }}</span>
                  </li>
                  <li>
                    <b>自检数量：</b>
                    <span>{{ item.selfCheckNum }}</span>
                  </li>
                  <li>
                    <b>检验结果：</b>
                    <span>{{ item.checkStatus == 1 ? "合格" : "不合格" }}</span>
                  </li>
                </ul>
                <div class="checkListBtn">
                  <van-button type="info" style="margin-right: 6px;" @click="InspectionEntry(item)"
                    >复检</van-button
                  >
                  <van-button type="info" @click="InspectionEntry(item)"
                    >检验录入</van-button
                  >
                </div>
              </div>
            </van-row>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <div
      v-show="list.length === 0 && loading === false"
      class="noDataAvailable noDataAvailable3"
    />
    <!--  时间选择 -->
    <van-popup v-model="showTime" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @confirm="onTimeChange"
        @cancel="showTime = false"
      />
    </van-popup>
  </div>
</template>
<script>
import moment from "moment";
export default {
  name: "FirstInspection",
  data() {
    return {
      show: false,
      showTime: false,
      currentDate: new Date(),
      title: localStorage.getItem("name"),
      code: localStorage.getItem("code"),
      search: {
        current: 1,
        size: 5,
        carryCheckNo: "",
        carryCheckTime: moment().format("YYYY-MM-DD"),
        carryCheckAtStart: moment().format("YYYY-MM-DD 00:00:00"),
        carryCheckAtEnd: moment().format("YYYY-MM-DD 23:59:59"),
      },
      list: [],
      pages: 0,
      total: 0,
      loading: false,
      finished: false,
      isLoading: false,
    };
  },
  created() {
    const { code } = this.$route.params;
    if (code) {
      this.search.carryCheckNo = code;
      this.getListInfo(1);
    }
  },
  mounted() {
    this.getListInfo(1);
  },
  methods: {
    /**
     * @description: 扫码
     * @param {*} e
     * @return {*}
     */
    scan() {
      this.$router.push("/saomaShow?name=首件检");
    },
    /* 时间选择赋值 */
    onTimeChange(date) {
      this.search.carryCheckAtStart = moment(date).format(
        "YYYY-MM-DD 00:00:00"
      );
      this.search.carryCheckAtEnd = moment(date).format("YYYY-MM-DD 23:59:59");
      this.search.carryCheckTime = moment(date).format("YYYY-MM-DD");
      this.getListInfo(1)
      this.showTime = false;
    },
    /* 获取页面数据 */
    async getListInfo(page) {
      if (page) this.search.current = page;
      if (+page === 1) this.list = [];
      this.loading = true;
      const res = await this.$axios.post(
        "/dobo-product/pro/first/article/check/page",
        {
          ...this.search,
          checkStatus: 0,
        }
      );
      if (res.data.code === 200) {
        this.show = false;
        const list = [];
        res.data.data.list.filter((item) => {
          list.push(item);
        });
        this.list = this.list.concat(list); // 去重 合并
        const hash = {};
        // 数组去重
        this.list = this.list.reduce((preVal, curVal) => {
          /* eslint-disable-next-line */
          hash[curVal.id]
            ? ""
            : (hash[curVal.id] = true && preVal.push(curVal));
          return preVal;
        }, []);
        this.total = res.data.data.total;
        this.loading = false;
        if (+this.list.length === +this.total) {
          this.finished = true;
        }
      }
    },
    //   触底加载
    onLoad() {
      setTimeout(() => {
        if (this.list.length < this.search.current) {
          this.finished = true;
          return;
        }

        if (this.list.length === this.total) {
          this.finished = true;
          return;
        }
        let num;
        num = this.search.current;
        num++;
        this.getListInfo(num);
      }, 1000);
    },
    //  下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.list = [];
        this.total = 0;
        this.finished = false;
        this.getListInfo(1);
        this.isLoading = false;
      }, 500);
    },
    /* 检验录入 */
    InspectionEntry(row) {
      console.log(this.$router);
      this.$router.push("/firstCheckInput");
      this.$store.commit("getDate", row);
    },
    // 返回
    onClickLeft() {
      this.$router.push("/Task");
    },
  },
};
</script>
<style lang='scss' scoped>
.checkList {
  padding: 40px 20px 20px 20px;
}
.contentBox{
  padding: 130px 10px 180px 10px;
}
.searchDiv {
  width: 100%;
  height: 88px;
  position: fixed;
  top: 60px;
  z-index: 99;
  background: #fff;
}
</style>

